<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

         /*  fr 的使用*/

        .container {
            display: grid;

            grid-template-columns:  200px 200px 200px; /*指定每列的宽   第二列 占父元素宽度-100  的  1/3  */

            grid-template-rows: 200px 200px 200px;    /*指定每行的高*/


            grid-row-gap: 20px;       /*行间距*/
            grid-column-gap: 20px;    /*列间距         简写: grid-gap: 20px 20px;  */


        }



        .container :nth-child(1) {
            background-color: rgb(120, 85, 85);    /* 第一个孩子*/
          
        }

        .container :nth-child(2) {
            background-color: rgb(119, 18, 18);
        }

        .container :nth-child(3) {
            background-color: rgb(34, 65, 150);
        }

        .container :nth-child(4) {
            background-color: rgb(190, 31, 124);
        }

        .container :nth-child(5) {
            background-color: rgb(28, 164, 228);
        }

        .container :nth-child(6) {
            background-color: rgb(10, 131, 131);
        }

        .container :nth-child(7) {
            background-color: rgb(255, 0, 212);
        }

        .container :nth-child(8) {
            background-color: rgb(22, 1, 1);
        }

        .container :nth-child(9) {
            background-color: rgb(51, 255, 0);
        }
    </style>
</head>



<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

</body>
</html>